<html>
	<head>
		<title>test.html</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				list-style: none;
				text-decoration: none;
			}

			#nav {
				width: 800px;
				height: 40px;
				background: #ccc;
				margin: 0 auto;
			}

			ul {
				background: #aaa
			}

			ul li {
				float: left;
				display: block;
				height: 40px;
				line-height: 40px;
				padding: 0 20px;
				position: relative;
			}

			ul li:hover {
				background: #cea;
			}

			ul li ul li {
				float: none;
			}

			/*关键一：将二级菜单设置为display：none;*/
			ul li ul {
				position: absolute;
				top: 40px;
				left: 0px;
				display: none;
			}

			ul li ul li:hover {
				background: red;
			}

			/*关键二：在划过二级菜单从属的一级菜单时，设置为display:block;*/
			ul li:hover ul {
				display: block;
			}
		</style>
	</head>
	<body>
		test.html<br>
		<div id="nav">
			<ul>
				<li><a href="">首页</a></li>
				<li><a href="">菜单管理</a>
					<ul>
						<li><a href="#">主页设置</a> </li>
						<li><a href="#">系统设置</a> </li>
						<li><a href="#">报表设置</a> </li>
					</ul>
				</li>
				<li><a href="">数据库管理</a>
					<ul>
						<li><a href="#">数据查询</a> </li>
						<li><a href="#">数据更新</a> </li>
						<li><a href="#">数据备份</a> </li>
					</ul>
				</li>
				<li><a href="">站点管理</a>
					<ul>
						<li><a href="#">信息管理</a> </li>
						<li><a href="#">数据管理</a> </li>
					</ul>
				</li>
				<li><a href="">站点设置</a>
					<ul>
						<li><a href="#">站点1</a> </li>
						<li><a href="#">站点2</a> </li>
					</ul>
				</li>
				<li><a href="">联系我们</a></li>
			</ul>
